<template>
  <div :style="`width: ${width}px; height: ${height}px; overflow: hidden`">
    <el-container style="height: 100%" >
      <el-aside width="160px" style="height: 100%; background-color: #545c64">
        <el-menu
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            :default-active="defaultKey"
            text-color="#fff"
            @select="handleSelect"
            style="border-right: none"
        >
          <el-menu-item v-for="item in menu" :index="item.code">
            <el-icon><component :is="item.icon" /></el-icon>
            <span v-html="item.name"></span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-main style="padding: 0">
          <div style="overflow: auto;">
            <component v-for="item in tplList" :is="item.component" :args="item.args" @goPage="goPage" />
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { Document, CoffeeCup, Avatar } from '@element-plus/icons-vue'
import ActionService from "@/service/ActionService"
import {defineAsyncComponent} from "vue";
export default {
  name: 'App',
  data () {
    return {
      width: 600,
      height: 400,
      defaultKey: 'game-root',
      menu: [
        /*{
          name: chrome.i18n.getMessage('menuNameHistory'),
          code: 'history',
          icon: Document
        },*/
        {
          name: chrome.i18n.getMessage('menuNameGameRoot'),
          code: 'game-root',
          icon: CoffeeCup
        },
        {
          name: chrome.i18n.getMessage('menuNameUser'),
          code: 'user',
          icon: Avatar
        }
      ],
      tplList: []
    }
  },
  components: { Document, CoffeeCup, Avatar },
  methods: {
    handleSelect(key, args) {
      this.tplList = []
      const routePage = this.$router[key]
      if (!routePage) {
        return
      }
      setTimeout(() => {
        this.tplList.push({
          component: routePage,
          args: args
        })
      }, 50)
    },
    goPage(page, args) {
      this.handleSelect(page, args)
    }
  },
  mounted() {
    ActionService.getAction((pageCode) => {
      this.defaultKey = pageCode || 'game-root'
      ActionService.removeAction()
      this.handleSelect(this.defaultKey)
    })
  }
}
</script>

<style>
/deep/ .el-menu {
  border-right: none;
}
/deep/ .el-main {
  padding: 0;
  --el-main-padding: 0;
}
</style>
